<template>
  <view>
    <view style="padding-top: 10px; padding-bottom: 10px; padding-left: 5px;">
      <text style="font-size: 9px; color: #ACACAC;">公告：</text>
      <text style="font-size: 11px; color: #ACACAC;">请按需点餐，避免浪费</text>
    </view>
    <uv-vtabs :chain="chain" :list="tabList" :height="height" hdHeight="100rpx" @change="change">
			<template v-for="(tabItem, index) in tabList" :key="index">
				<uv-vtabs-item :index="tabItem.id">
					<view v-for="food in tabItem.childrens" :key="food.id" :style="{paddingLeft: '10px', paddingBottom: '25px'}">
            <view>
              <image :src="food.imgUrl" mode="widthFix" style="width: 95%;"/>
            </view>
						<view style="padding-top: 5px; font-weight: bolder;">
							<text>{{food.foodNm}}</text>
						</view>
						<view style="font-size: 12px;">
							<text>{{food.desc}}</text>
						</view>
            <view style="font-weight: bolder; padding-top: 10px; display: flex; flex-direction: row; text-align: center; align-items: center;">
              <view style="width: 10%;">
                <text style="font-size: 12px;">￥</text>
							  <text>{{food.price}}</text>
              </view>
              <view style="width: 90%; padding-right: 15px;">
                <uni-icons style="float: right;" type="plus-filled" size="30" color="#FBBD08"></uni-icons>
              </view>
						</view>
					</view>
					<view v-if="index < (tabList.length-1)">
						<uv-gap bg-color="#f1f1f1" height="4"></uv-gap>
					</view>
				</uv-vtabs-item>
			</template>
			<uv-gap bg-color="#fff" height="600"></uv-gap>
		</uv-vtabs>
  </view>
  <view class="gouwuche-class" :style="{width: (screenWidth - screenWidth*0.1)+'px'}">
    <view style="position: fixed; bottom: 5%; left: 3%; z-index: 999;">
      <uni-badge text="1" :max-num="999" :offset="[10, 25]" type="error" absolute="rightTop" size="normal">
        <image style="height: 70px; width: 70px; " src="../../static/order/gouwuche.png" mode="scaleToFill"/>
      </uni-badge>
    </view>
    <view style="position: fixed; z-index: 999; left: 21%;">
      <text style="font-size: 10px;">预估￥</text>
      <text>34.8</text>
    </view>
    <view style="position: fixed; z-index: 999; right: 3%;">
      <uv-button type="primary" shape="circle" text="去结算" :customStyle="{background: '#FBBD08', color: '#fff', border: '0px', height: '55rpx', width: '120rpx'}"/>
    </view>
  </view>
</template>



<script setup lang="ts">
import { ref } from 'vue'

const height: number = uni.getSystemInfoSync().windowHeight - uni.upx2px(100)

const screenWidth: number = uni.getSystemInfoSync().screenWidth


interface TabContent {
  id: string,
  foodNm: string,
  desc: string,
  price: number,
  imgUrl: string,
}

interface TabItem {
  id: string
  name: string
  childrens: TabContent[]
}

const tabList = ref<TabItem[]>([])
tabList.value.push({
  id: "10001",
  name: "商家招牌",
  childrens: [{
    id: "1",
    foodNm: "鲜甜鲩鱼生",
    desc: "甜而不腻，刺身，皖鱼",
    price: 34.8,
    imgUrl: "../../static/foods/item01/01.png"
  },
  {
    id: "2",
    foodNm: "深海金雕鱼生",
    desc: "原汁原味，刺身，金雕",
    price: 98,
    imgUrl: "../../static/foods/item01/02.png"
  },
  {
    id: "3",
    foodNm: "深海金雕鱼生",
    desc: "原汁原味，刺身，金雕",
    price: 98,
    imgUrl: "../../static/foods/item01/02.png"
  },
  {
    id: "4",
    foodNm: "深海金雕鱼生",
    desc: "原汁原味，刺身，金雕",
    price: 98,
    imgUrl: "../../static/foods/item01/02.png"
  }]
})



const chain = ref<boolean>(true)

const change = (index: number) => {
  console.log('选项改变：',index)
}


</script>


<style lang="scss">
</style>

<style lang="scss" scoped>
.gouwuche-class{
  position: fixed;
  z-index: 99;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  height: 50px;

}
</style>

